<template>
	<view class="warp-zhenggfk">
		<u-form :model="form" ref="uForm">
			<u-form-item :border-bottom="borderBottom" prop="">
				<view class="group-row">
					<view class="group-title">
						单位编码：
					</view>
					<view class="group-content">asdddddddddddddddddddddddddddddddddddddddddddddddddd</view>
				</view>
			</u-form-item>
			<u-form-item :border-bottom="borderBottom" prop="">
				<view class="group-row">
					<view class="group-title">
						单位名称：
					</view>
					<view class="group-content">asdddddddddddddddddddddddddddddddddddddddddddddddddd</view>
				</view>
			</u-form-item>
			<u-form-item :border-bottom="borderBottom" prop="">
				<view class="group-row">
					<view class="group-title">
						单位类别：
					</view>
					<view class="group-content">asdddddddddddddddddddddddddddddddddddddddddddddddddd</view>
				</view>
			</u-form-item>
			<u-form-item :border-bottom="borderBottom" prop="">
				<view class="group-row">
					<view class="group-title">
						所属区划：
					</view>
					<view class="group-content">asdddddddddddddddddddddddddddddddddddddddddddddddddd</view>
				</view>
			</u-form-item>
			<u-form-item :border-bottom="borderBottom" prop="">
				<view class="group-title">
					照片：
				</view>
			</u-form-item>
			<u-form-item :border-bottom="borderBottom">
				<view class="group-row">
					<view style="width:200rpx;height:200rpx;margin-bottom: 20rpx;">
						<u-image src="https://cdn.uviewui.com/uview/example/fade.jpg" width="100%" height="100%" ></u-image>
					</view>
					<view style="width:200rpx;height:200rpx;margin-bottom: 20rpx;">
						<u-image src="https://cdn.uviewui.com/uview/example/fade.jpg" width="100%" height="100%" ></u-image>
					</view>
					<view style="width:200rpx;height:200rpx;margin-bottom: 20rpx;">
						<u-image src="https://cdn.uviewui.com/uview/example/fade.jpg" width="100%" height="100%" ></u-image>
					</view>
					<view style="width:200rpx;height:200rpx;margin-bottom: 20rpx;">
						<u-image src="https://cdn.uviewui.com/uview/example/fade.jpg" width="100%" height="100%" ></u-image>
					</view>
					
				</view>
			</u-form-item>

			<view class="map-inner">
				<map style="width: 100%; height: 300px;" :latitude="mapSection.latitude" :longitude="mapSection.longitude"
				 :markers="mapSection.covers"></map>
			</view>
		</u-form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				borderBottom: false,
				//上传地址
				action: 'http://www.example.com/upload',
				radioList: [{
						name: '已处理',
						disabled: false
					},
					{
						name: '未处理',
						disabled: false
					}
				],
				fileList: [],
				customStyle: {
					background: '#409eff',
					color: '#fff',
					marginTop: '20rpx'
				},
				form: {
					shijlb: '',
					fileList: [],
					shangbbz: '',
					wanggwz: '',
					weizjshjms:''
				},
				rules: {
					shijlb: [{
						required: true,
						message: '请输入选择单位类别',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					fileList: [{
						required: true,
						message: '请上传现场照片',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					shangbbz: [{
						required: true,
						message: '请输入整改进度',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					wanggwz: [{
						required: true,
						message: '请输入网格位置',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}]
				},
				show: false,
				actionSheetList: [{
						text: '男'
					},
					{
						text: '女'
					},
					{
						text: '保密'
					}
				],
				mapSection: {
					id: 0, // 使用 marker点击事件 需要填写id
					title: 'map',
					latitude: 39.909,
					longitude: 116.39742,
					covers: [{
						latitude: 39.909,
						longitude: 116.39742,
						iconPath: '../../../static/location.png'
					}, {
						latitude: 39.90,
						longitude: 116.39,
						iconPath: '../../../static/location.png'
					}]
				}
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			actionSheetCallback(index) {
				this.form.shijlb = this.actionSheetList[index].text;
			},
			handltongdxzClick(){
				
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}

	}
</script>

<style>
	.warp-zhenggfk {
		width: 100%;
		height: auto;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.zhenggfk-upload {
		width: 100%;
		height: auto;
	}

	.group-title {
		width: 200rpx;
		font-size: 32rpx;
		color: rgb(3, 169, 244);
		margin-bottom: 20rpx;
	}

	.map-box {
		width: 100%;
		height: 600rpx;
		margin-top: 20rpx;
	}
	.weizjshjms-bar{
		display: flex;
		justify-content: space-between;
	}
	.weizjshjms-input{
		width: 70%;
	}
	.tdxz-btn button{
		margin-top: 0 !important;
	}
	.group-content{
		text-align: right;
		flex:1;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		margin-bottom: 10px;
	}
	.group-row{
		width: 700rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.map-inner{
		width: 100%;
		height: calc(100% - 400rpx);
		margin-bottom: 40rpx;
	}
</style>
